<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello，欢迎来到您的购物车</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/cart.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <!-- 一级导航开始 -->
    <div class="header-top clearfix" id="nav-top">
        <nav>
            <a href="" class="logo"></a>
            <ul class="nav-right">
                <li><a href="">资质证照 / 协议规则</a></li>
                <li class="addshop"><a href="javascript:;">添加良品</a></li>
                <li class="message">
                    <a href="">消息</a>
                    <!-- 信息二级菜单开始 -->
                    <ul>
                        <li>动态<span>0</span></li>
                        <li>评论<span>0</span></li>
                        <li>私信<span>0</span></li>
                        <li>粉丝<span>0</span></li>
                        <li>喜欢<span>0</span></li>
                        <li>通知<span>0</span></li>
                    </ul>
                </li>
                <li class="cart-nav" onmouseenter="shopCountNum()">
                    <a href=""><span class="cartNumber"></span>购物车</a>
                    <!-- 购物车二级菜单开始 -->
                    <ul>
                        <li>您的购物车有<span class="cartNumber"></span>件商品</li>
                        <li><a href="shop.html">快去抢购良仓商品吧</a> </li>
                    </ul>

                </li>
                <li><a href="reg.html" class="reg">注册</a></li>
                <li><a href="login.html" class="login">登录</a></li>
            </ul>
        </nav>
    </div>
    <!-- 二级导航开始 -->
    <div class="subMenu">

        <ul class="clearfix">
            <li><a href="index.html">首页</a> </li>
            <li class="cartcon">
                <a href="shop.html">商店</a>
                <!-- 商店二级菜单开始 -->
                <div class="cart-list">
                    <a href="">家居</a>
                    <a href="">文具</a>
                    <a href="">数码</a>
                    <a href="">玩乐</a>
                    <a href="">餐厨</a>
                    <a href="">美食</a>
                    <a href="">服装</a>
                    <a href="">鞋包</a>
                    <a href="">配饰</a>
                    <a href="">美护</a>
                    <a href="">出行</a>
                    <a href="">图书</a>
                    <a href="">艺术</a>
                    <a href="">水具</a>
                    <a href="">运动</a>
                </div>
            </li>
            <li class="zazhicon">
                杂志
                <!-- 杂志二级菜单开始 -->
                <div class="zazhi">
                    <a href="">趣物</a>
                    <a href="">数码</a>
                    <a href="">汽车</a>
                    <a href="">文化</a>
                    <a href="">时尚</a>
                    <a href="">美食</a>
                    <a href="">建筑</a>
                    <a href="">空间</a>
                    <a href="">圈子</a>
                    <a href="">清单</a>
                    <a href="">活动</a>
                    <a href="">视频</a>
                </div>
            </li>
            <li class="sharecon">
                分享
                <!-- 分享二级菜单开始 -->
                <div class="share-list">
                    <a href="">男士</a>
                    <a href="">家居</a>
                    <a href="">数码</a>
                    <a href="">工具</a>
                    <a href="">玩具</a>
                    <a href="">美容</a>
                    <a href="">孩子</a>
                    <a href="">宠物</a>
                    <a href="">饮食</a>
                    <a href="">运动</a>
                    <a href="">文化</a>
                    <a href="">女士</a>
                </div>
            </li>
            <li>达人</li>
            <li>有偿资讯</li>
            <li></li>
        </ul>

    </div>
    <!-- 购物车开始 -->
    <div class="cartbar">
        <div class="cartbar-top">
            |
            <a style="color:#6393b4;">购物车</a>
            |
            <a>付款</a>
            |

        </div>
        <!-- 购物车列表 -->
        <table>
            <thead>
                <tr>
                    <td style="padding-left: 0px;"><input type="checkbox" class="all-select" onchange="allSelect(this)">
                        全选
                    </td>
                    <td>良品</td>
                    <td>数量</td>
                    <td>单价(元)</td>
                    <td>小计(元)</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>
                        <input type="checkbox">
                        <img src="./img/282275.jpg" alt="">
                    </td>
                    <td>详情</td>
                    <td><input type="number" min="1" value="1"></td>
                    <td>358</td>
                    <td>358</td>
                    <td><button>删除</button></td>
                </tr> -->
            </tbody>
        </table>

        <p>
            良品总价/ <span>￥ <span class="zongjia"></span></span>
        </p>
        <p class="jiesuan">
            <span>立即结算</span>
        </p>
        <p>
            -----继续购物-----
        </p>
    </div>
    <!-- 购物车结束 底部开始 -->
    <div class="service">
        <a href="">
            <p></p>
        </a>

        <div class="slogen">
            <dl>
                <dt></dt>
                <dd>
                    <p>全球精品</p>
                    <p>Global Selections</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>正品保证</p>
                    <p>Authenticity Guaranteed</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>全场包邮</p>
                    <p>Free Delivery</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>400-897-6363</p>
                    <p>工作日 09:00-18:00</p>
                </dd>
            </dl>

        </div>

    </div>
    <!-- 售后结束尾部开始 -->
    <div class="footer">
        <div class="wrap">
            <div class="footleft">
                <div class="download">
                    <p><span>iPhone Android</span></p>
                    <p>客户端下载</p>
                </div>
                <div class="friendly">
                    <p>
                        <a href="">关于良仓</a>
                        <a href="">服务协议</a>
                        <a href="">隐私保护政策</a>
                        <a href="">使用指南</a>
                        <a href="">联系我们</a>
                        <a href="">加入我们</a>
                        <a href="">友情链接</a>
                        <a href="">私信良仓</a>
                    </p>

                    <p>
                        <span>©</span>
                        2013-2019 北京良仓文化传播有限公司版权所有
                    </p>
                    <p> &nbsp;&nbsp; 公司名称：北京良仓文化传播有限公司 电话：010-58696733</p>
                    <p> &nbsp;&nbsp; 公司地址：北京朝阳区百子湾路32号6号楼1层60号.</p>
                    <p> &nbsp;&nbsp; 社会信用统一代码：91110105059231575L 食品许可证：JY11105160159557 </p>
                    <p> &nbsp;&nbsp; 图书证名称：中华人民共和国出版物经营许可证 图书证编号：新出发京零 字第 朝 150051 号 </p>
                    <p>&nbsp;&nbsp; 京ICP备13010677号 京公网安备&nbsp;&nbsp;11010502025627</p>

                </div>

            </div>

            <div class="footright">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

            </div>
        </div>


    </div>

    <!-- 尾部结束 右固定锚点开始 -->

    <div class="right-btn">
        <img src="./img/30892.png" alt="">
    </div>
    <div class="bottom-btn">
        <a href="#nav-top"></a>
    </div>
    <div class="popbar">
        <a href="javascript:;">联系客服</a>
    </div>
    <div class="kefu">
        <p>如有问题，请联系运营</p>
        <p><span style="margin-right: 20px;">tel:</span>13598613871</p>
        <button>关闭</button>

    </div>

    <script>
        //展示购物车商品
        /*  接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
         接口请求方式：get
         接口参数：
           id  用户id */
        let id = localStorage.getItem("id");
        if (id) {
            loadCartList();
        }else{
            alert("请您登录后再来哈")
        }


        //展示购物车商品函数
        function loadCartList() {
            let loadCartListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
            $.get(loadCartListAPI, { id }).then(r => {
                console.log(r.data);
                let cartArr = r.data;
                str = cartArr.map(v => `
                <tr>
                   
                    <td>
                        <input type="checkbox" class="single-select" onchange="singleSelect()">
                        <a href="item.html?id=${v.pid}"><img src="${v.pimg}" alt=""></a>
                    </td>
                    <td>${v.pdesc}</td>
                    <td><input type="number" min="1" value="${v.pnum}" onchange="updateNum(this,${v.pid})" class="Pnumber"></td>
                    <td class="Pprice">${v.pprice}</td>
                    <td class="xiaoji"></td>
                    <td><button onclick="delCart(${v.pid})">删除</button></td>
                
                </tr>
                `).join("")
                $("tbody").html(str);
            })
        }
        //删除购物车商品函数
        function delCart(pid) {
            /*    接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
            接口请求方式：get
            接口参数：
            uid  用户id
            pid  商品id */
            let delCartAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
            $.get(delCartAPI, { uid: id, pid }).then(r => {
                console.log(r);
            })
            loadCartList();
        }

        //更新购物车商品数量
        function updateNum(ipt, pid) {
            /*     接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
             接口请求方式：get
             接口参数：
             uid  用户id
             pid  商品id
             pnum  要添加的商品数量 */
            let pnum = ipt.value;
            let updateNumAPI = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
            $.get(updateNumAPI, { uid: id, pid, pnum }).then(r => {
                console.log(r);
            })
            loadCartList();
        }

        //单选框选定
        function singleSelect() {
            CallCountPrice();
            let singleSelectArr = document.querySelectorAll(".single-select");//这是一个伪数组 
            //转化为真正的数组再进行判断
            let arr = [...singleSelectArr];
            let isAllchecked = arr.every(v => v.checked == true);
            //给全选框赋值
            document.querySelector(".all-select").checked = isAllchecked;

        }

        //复选框选定

        function allSelect(ipt) {
            //让单选框同步一致
            let singleSelectArr = document.querySelectorAll(".single-select");
            singleSelectArr.forEach(v => v.checked = ipt.checked)
            //计算价格
            CallCountPrice();

        }



        //计算总价和各自的小计
        function CallCountPrice() {
            let count = 0;
            let countprice = 0;
            let countadd;
            let singleSelectArr = document.querySelectorAll(".single-select");
            singleSelectArr.forEach(v => {
                if (v.checked) {
                    //通过先找到父元素再找子元素
                    let countTr = v.parentNode.parentNode;
                    let pnum = countTr.querySelector(".Pnumber").value;
                    let price = countTr.querySelector(".Pprice").innerHTML;
                    console.log(pnum, price);
                    countadd = pnum * price;
                    count += Number(pnum);
                    countprice += countadd;
                    countTr.querySelector(".xiaoji").innerHTML = countadd;
                }
            })
            console.log(count, countprice);
            $(".zongjia").html(countprice)
        }

        //计算购物车的总商品数
        function shopCountNum() {
            let count = 0;
            let singleSelectArr = document.querySelectorAll(".single-select");
            singleSelectArr.forEach(v => {
                //通过先找到父元素再找子元素
                let countTr = v.parentNode.parentNode;
                let pnum = countTr.querySelector(".Pnumber").value;
                count += Number(pnum);
            })
            console.log(count);
            $(".cartNumber").html(count)
        }



        //判断是否登录跳转页面
        function toMycart() {
            let uid = localStorage.getItem("id");
            if (uid) {
                location.href = "cart.html"
            } else {
                location.href = "login.html"
            }
        }

        //判断是否登录
        let Mytoken = localStorage.getItem("token");
        let Myusername = localStorage.getItem("username")
        console.log(Mytoken);
        console.log(Myusername);
        if (Mytoken) {
            $(".addshop").click(function () {
                location.href = "./后台管理/index.html"
            })
            $(".reg").html(Myusername)
            $(".login").html("hello")
        } else {
            $(".addshop").click(function () {
                alert("请您登录账号后再操作哈")
            })
        }

        //联系客服按钮控制
        $(".popbar a").click(function () {
            $(".kefu").css("display", "block")
        })
        $(".kefu button").click(function () {
            $(".kefu").css("display", "none")
        })

    </script>

</body>

</html>